import React, { Component } from 'react';
import { Link } from 'react-router-dom';
// require ('./../mock')


class Com extends Component {
  constructor(props) {
    super(props);
    this.state = {
      dat:[]
    }
  }
  componentDidMount() {
    let f_name = '往期头条';
    let name = JSON.stringify(f_name)
    fetch(`https://sun.daxunxun.com/api/food/type?f_type=`+name)
    .then(res => res.json())
    .then(data => {
      console.log(data)
      this.setState({
        dat: data
      })
    })
  }
  goDetail (fid){
    this.props.history.push('/detail/' + fid)
  }
  recipes_Raight (){

  }
    
  render() {
    let dat = this.state.dat
    // console.log(list)
    let arr = [];
    for (var i in dat) {
      if (i<4) {
        // console.log(dat[i])
        let fid = dat[i].f_id  // 获取食物id
        arr.push(
          <li key={dat[i].f_id} onClick={ this.goDetail.bind(this, fid)}>
            <div className="InterfixImg">
              <img src={dat[i].banner} alt="" />
            </div>
            {/* <div className="Recipe_spand">
              <span>
                {dat[i].name}
              </span>
            </div> */}
            <div className="_Interfix_ul_li">
                <p>{dat[i].name}</p>
            </div>
          </li>
        )
      }
    }
    return (
     
      <div className="New_Interfix">
        <div className="New_Interfix_nav">
          <b>家常菜相关菜单</b>
          <Link to=""><span>全部</span></Link>
        </div>
        <div className="New_Interfix_ul">
          <ul className="_Interfix_ul">
            {/* <li>
                <img src="" alt="" className="InterfixImg"/>
                <div className="_Interfix_ul_li">
                   <p>家常菜</p>
                </div>
            </li> */}
           {
             arr
           }
            
        </ul>

        </div>
      
    </div>
    
  )
  }
}

export default Com;